import React, { useState } from 'react';
import { Tree, Card, Typography, Row, Col, Empty, Input, Alert, Tag } from 'antd';
import type { DataNode } from 'antd/es/tree';
import {
    FolderOutlined,
    FileOutlined,
    CodeOutlined,
    LayoutOutlined,
    ApiOutlined,
    GlobalOutlined,
    ToolOutlined,
    UserOutlined,
    DatabaseOutlined,
    SearchOutlined,
    InfoCircleOutlined
} from '@ant-design/icons';
import './ProjectStructure.scss';

const { Title, Paragraph, Text } = Typography;
const { Search } = Input;

// 项目概述组件
const ProjectOverview: React.FC = () => (
    <div className="project-overview">
        <Alert
            message="React Blog 项目概述"
            description={
                <div>
                    <Paragraph>
                        这是一个基于 React 18 + TypeScript + Ant Design 构建的现代化博客系统，
                        采用了最新的前端技术栈和最佳实践。
                    </Paragraph>
                    <div className="tech-tags">
                        <Tag color="blue">React 18</Tag>
                        <Tag color="geekblue">TypeScript</Tag>
                        <Tag color="purple">Ant Design</Tag>
                        <Tag color="cyan">React Router</Tag>
                        <Tag color="green">SCSS</Tag>
                        <Tag color="magenta">Axios</Tag>
                    </div>
                </div>
            }
            type="info"
            showIcon
            icon={<InfoCircleOutlined />}
            className="overview-alert"
        />
    </div>
);

const treeData: DataNode[] = [
    {
        title: '前端技术栈',
        key: 'tech-stack',
        icon: <ToolOutlined />,
        children: [
            {
                title: 'React 18',
                key: 'react',
                icon: <CodeOutlined />,
                children: [
                    {
                        title: 'Hooks',
                        key: 'hooks',
                        isLeaf: true,
                    },
                    {
                        title: '组件设计',
                        key: 'components',
                        isLeaf: true,
                    },
                    {
                        title: '性能优化',
                        key: 'performance',
                        isLeaf: true,
                    },
                    {
                        title: '状态管理',
                        key: 'state',
                        isLeaf: true,
                    }
                ]
            },
            {
                title: 'TypeScript',
                key: 'typescript',
                icon: <FileOutlined />,
                children: [
                    {
                        title: '类型系统',
                        key: 'types',
                        isLeaf: true,
                    },
                    {
                        title: '接口设计',
                        key: 'interfaces',
                        isLeaf: true,
                    }
                ]
            },
            {
                title: '样式系统',
                key: 'style-system',
                icon: <GlobalOutlined />,
                isLeaf: true
            },
            {
                title: '前端打包',
                key: 'frontend-build',
                icon: <CodeOutlined />,
                children: [
                    {
                        title: 'Webpack配置',
                        key: 'webpack-config',
                        isLeaf: true,
                    },
                    {
                        title: '打包优化',
                        key: 'build-optimization',
                        isLeaf: true,
                    },
                    {
                        title: '资源处理',
                        key: 'resource-handling',
                        isLeaf: true,
                    },
                    {
                        title: '环境配置',
                        key: 'env-config',
                        isLeaf: true,
                    },
                    {
                        title: '部署策略',
                        key: 'deploy-strategy',
                        isLeaf: true,
                    }
                ]
            },
            {
                title: 'Markdown渲染',
                key: 'markdown-render',
                icon: <FileOutlined />,
                children: [
                    {
                        title: '基础渲染',
                        key: 'markdown-basic',
                        isLeaf: true,
                    },
                    {
                        title: '代码高亮',
                        key: 'markdown-code',
                        isLeaf: true,
                    },
                    {
                        title: '扩展功能',
                        key: 'markdown-extensions',
                        isLeaf: true,
                    }
                ]
            },
        ]
    },
    {
        title: '项目架构',
        key: 'architecture',
        icon: <FolderOutlined />,
        children: [
            {
                title: '布局系统',
                key: 'layout',
                icon: <LayoutOutlined />,
                isLeaf: true
            },
            {
                title: '路由系统',
                key: 'routing',
                icon: <ApiOutlined />,
                children: [
                    {
                        title: '动态路由',
                        key: 'dynamic-routing',
                        isLeaf: true,
                    },
                    {
                        title: '权限控制',
                        key: 'auth-control',
                        isLeaf: true,
                    }
                ]
            },
            {
                title: '数据管理',
                key: 'data',
                icon: <DatabaseOutlined />,
                children: [
                    {
                        title: 'API 封装',
                        key: 'api',
                        isLeaf: true,
                    },
                    {
                        title: '状态管理',
                        key: 'state-management',
                        isLeaf: true,
                    }
                ]
            }
        ]
    },
    {
        title: '项目文档',
        key: 'documentation',
        icon: <FileOutlined />,
        children: [
            {
                title: 'README.md',
                key: 'readme',
                icon: <FileOutlined />,
                isLeaf: true,
            },
            {
                title: 'DEPLOY.md',
                key: 'deploy-doc',
                icon: <FileOutlined />,
                isLeaf: true,
            }
        ]
    },
    {
        title: '功能模块',
        key: 'features',
        icon: <ApiOutlined />,
        children: [
            {
                title: '文章系统',
                key: 'article-system',
                icon: <FileOutlined />,
                children: [
                    {
                        title: '文章列表',
                        key: 'article-list',
                        isLeaf: true,
                    },
                    {
                        title: '文章详情',
                        key: 'article-detail',
                        isLeaf: true,
                    },
                    {
                        title: '文章编辑',
                        key: 'article-editor',
                        isLeaf: true,
                    }
                ]
            },
            {
                title: 'Markdown渲染',
                key: 'markdown-render',
                icon: <FileOutlined />,
                children: [
                    {
                        title: '基础渲染',
                        key: 'markdown-basic',
                        isLeaf: true,
                    },
                    {
                        title: '代码高亮',
                        key: 'markdown-code',
                        isLeaf: true,
                    },
                    {
                        title: '扩展功能',
                        key: 'markdown-extensions',
                        isLeaf: true,
                    }
                ]
            },
            {
                title: '用户系统',
                key: 'user-system',
                icon: <UserOutlined />,
                children: [
                    {
                        title: '认证授权',
                        key: 'auth',
                        isLeaf: true,
                    },
                    {
                        title: '个人中心',
                        key: 'profile',
                        isLeaf: true,
                    }
                ]
            }
        ]
    },
    {
        title: '工程化',
        key: 'engineering',
        icon: <ToolOutlined />,
        children: [
            {
                title: '测试',
                key: 'testing',
                isLeaf: true
            },
            {
                title: '部署',
                key: 'deployment',
                isLeaf: true
            },
            {
                title: '性能优化',
                key: 'optimization',
                isLeaf: true
            }
        ]
    }
];

// 知识点内容映射
const contentMap: Record<string, React.ReactNode> = {
    'hooks': (
        <>
            <Title level={5}>React Hooks 核心概念</Title>
            <Paragraph>
                React Hooks 是 React 16.8 引入的新特性，它允许在函数组件中使用状态和其他 React 特性。
                本项目中使用了多个 Hooks 来管理状态和副作用：
            </Paragraph>
            <ul>
                <li>useState: 用于管理组件本地状态</li>
                <li>useEffect: 处理副作用，如数据获取和订阅</li>
                <li>useContext: 跨组件共享状态，如用户信息</li>
                <li>useReducer: 复杂状态管理，如Todo示例</li>
                <li>自定义 Hooks: 抽象和复用状态逻辑</li>
            </ul>
        </>
    ),
    'components': (
        <>
            <Title level={5}>组件设计原则</Title>
            <Paragraph>
                本项目采用以下组件设计原则：
            </Paragraph>
            <ul>
                <li>组件职责单一</li>
                <li>通过 Props 进行组件通信</li>
                <li>合理使用受控和非受控组件</li>
                <li>组件复用和代码分割</li>
                <li>高阶组件（HOC）封装通用逻辑</li>
                <li>组件懒加载优化</li>
            </ul>
        </>
    ),
    'performance': (
        <>
            <Title level={5}>性能优化策略</Title>
            <Paragraph>
                项目中实施的性能优化措施：
            </Paragraph>
            <ul>
                <li>React.lazy 实现代码分割</li>
                <li>useMemo 和 useCallback 优化渲染</li>
                <li>虚拟列表处理大数据</li>
                <li>合理使用 key 属性</li>
                <li>路由懒加载</li>
                <li>图片资源优化</li>
                <li>状态管理优化</li>
                <li>缓存策略</li>
            </ul>
        </>
    ),
    'types': (
        <>
            <Title level={5}>TypeScript 类型系统</Title>
            <Paragraph>
                项目中的 TypeScript 类型定义：
            </Paragraph>
            <ul>
                <li>接口定义（Interface）</li>
                <li>类型别名（Type Alias）</li>
                <li>泛型（Generics）</li>
                <li>类型断言</li>
                <li>联合类型和交叉类型</li>
                <li>类型守卫</li>
                <li>工具类型的使用</li>
            </ul>
        </>
    ),
    'layout': (
        <>
            <Title level={5}>布局系统设计</Title>
            <Paragraph>
                项目的布局系统实现：
            </Paragraph>
            <ul>
                <li>响应式布局设计</li>
                <li>Flex布局应用</li>
                <li>Grid网格系统</li>
                <li>可折叠侧边栏</li>
                <li>自适应页脚</li>
                <li>面包屑导航</li>
            </ul>
        </>
    ),
    'state': (
        <>
            <Title level={5}>状态管理方案</Title>
            <Paragraph>
                项目的状态管理实现：
            </Paragraph>
            <ul>
                <li>Context全局状态</li>
                <li>useReducer复杂状态</li>
                <li>状态提升</li>
                <li>组件通信</li>
                <li>状态持久化</li>
            </ul>
        </>
    ),
    'api': (
        <>
            <Title level={5}>API 封装</Title>
            <Paragraph>
                API 请求处理：
            </Paragraph>
            <ul>
                <li>Axios 封装</li>
                <li>请求拦截器</li>
                <li>响应处理</li>
                <li>错误处理</li>
                <li>统一错误提示</li>
                <li>请求取消</li>
                <li>请求重试</li>
                <li>数据缓存</li>
            </ul>
        </>
    ),
    'auth': (
        <>
            <Title level={5}>用户认证</Title>
            <Paragraph>
                认证系统实现：
            </Paragraph>
            <ul>
                <li>JWT 认证</li>
                <li>表单验证</li>
                <li>权限控制</li>
                <li>记住登录</li>
                <li>路由守卫</li>
                <li>权限菜单</li>
                <li>Token刷新</li>
            </ul>
        </>
    ),
    'style-system': (
        <>
            <Title level={5}>样式系统</Title>
            <Paragraph>
                项目样式管理：
            </Paragraph>
            <ul>
                <li>CSS Modules</li>
                <li>SCSS预处理器</li>
                <li>主题定制</li>
                <li>样式组织</li>
                <li>响应式设计</li>
                <li>动画效果</li>
            </ul>
        </>
    ),
    'testing': (
        <>
            <Title level={5}>测试策略</Title>
            <Paragraph>
                项目测试实践：
            </Paragraph>
            <ul>
                <li>单元测试</li>
                <li>集成测试</li>
                <li>组件测试</li>
                <li>Hook测试</li>
                <li>快照测试</li>
                <li>测试覆盖率</li>
            </ul>
        </>
    ),
    'deployment': (
        <>
            <Title level={5}>部署与优化</Title>
            <Paragraph>
                项目部署相关：
            </Paragraph>
            <ul>
                <li>构建优化</li>
                <li>CI/CD配置</li>
                <li>Docker部署</li>
                <li>性能监控</li>
                <li>错误追踪</li>
                <li>自动化测试</li>
            </ul>
        </>
    ),
    'article-list': (
        <>
            <Title level={5}>文章列表功能</Title>
            <Paragraph>
                文章列表页面实现：
            </Paragraph>
            <ul>
                <li>列表展示和分页</li>
                <li>搜索和筛选</li>
                <li>排序功能</li>
                <li>预览和快速操作</li>
            </ul>
        </>
    ),
    'article-detail': (
        <>
            <Title level={5}>文章详情功能</Title>
            <Paragraph>
                文章详情页面特性：
            </Paragraph>
            <ul>
                <li>Markdown 渲染</li>
                <li>评论系统</li>
                <li>点赞功能</li>
                <li>分享功能</li>
            </ul>
        </>
    ),
    'article-editor': (
        <>
            <Title level={5}>文章编辑器</Title>
            <Paragraph>
                编辑器功能特性：
            </Paragraph>
            <ul>
                <li>Markdown 编辑器</li>
                <li>图片上传</li>
                <li>标签管理</li>
                <li>草稿保存</li>
            </ul>
        </>
    ),
    'loading-animation': (
        <>
            <Title level={5}>加载动画实现</Title>
            <Paragraph>
                项目中的加载动画采用了多种技术和最佳实践：
            </Paragraph>
            <ul>
                <li>React Suspense: 用于组件懒加载时的加载状态处理</li>
                <li>CSS 动画: 使用 keyframes 实现平滑的动画效果</li>
                <li>条件渲染: 基于状态控制加载动画的显示和隐藏</li>
                <li>性能优化: 使用 transform 和 opacity 实现高性能动画</li>
                <li>渐变背景: 使用 CSS 渐变创建现代感的视觉效果</li>
                <li>响应式设计: 确保在不同设备上的良好表现</li>
            </ul>
            <Paragraph>
                主要特点：
            </Paragraph>
            <ul>
                <li>全屏渐变背景提供沉浸式体验</li>
                <li>旋转的加载图标提供视觉反馈</li>
                <li>进度条动画展示加载进度</li>
                <li>平滑的淡出动画提升用户体验</li>
                <li>支持自定义加载时长和动画效果</li>
            </ul>
        </>
    ),
    'interfaces': (
        <>
            <Title level={5}>接口设计规范</Title>
            <Paragraph>
                项目中的接口设计实践：
            </Paragraph>
            <ul>
                <li>RESTful API设计规范</li>
                <li>请求响应数据结构</li>
                <li>错误处理机制</li>
                <li>接口版本控制</li>
                <li>接口文档规范</li>
            </ul>
        </>
    ),
    'dynamic-routing': (
        <>
            <Title level={5}>动态路由实现</Title>
            <Paragraph>
                项目的动态路由功能：
            </Paragraph>
            <ul>
                <li>路由参数处理</li>
                <li>嵌套路由配置</li>
                <li>路由懒加载</li>
                <li>404页面处理</li>
                <li>路由钩子函数</li>
            </ul>
        </>
    ),
    'auth-control': (
        <>
            <Title level={5}>权限控制系统</Title>
            <Paragraph>
                项目的权限控制实现：
            </Paragraph>
            <ul>
                <li>角色权限管理</li>
                <li>路由访问控制</li>
                <li>按钮级权限</li>
                <li>权限持久化</li>
                <li>动态权限菜单</li>
            </ul>
        </>
    ),
    'optimization': (
        <>
            <Title level={5}>性能优化实践</Title>
            <Paragraph>
                项目性能优化措施：
            </Paragraph>
            <ul>
                <li>首屏加载优化</li>
                <li>按需加载策略</li>
                <li>资源压缩处理</li>
                <li>缓存优化</li>
                <li>网络请求优化</li>
                <li>渲染性能优化</li>
            </ul>
        </>
    ),
    'state-management': (
        <>
            <Title level={5}>状态管理详解</Title>
            <Paragraph>
                项目状态管理方案：
            </Paragraph>
            <ul>
                <li>Context状态管理</li>
                <li>组件状态提升</li>
                <li>状态持久化方案</li>
                <li>状态更新优化</li>
                <li>状态共享策略</li>
            </ul>
        </>
    ),
    'webpack-config': (
        <>
            <Title level={5}>Webpack 配置详解</Title>
            <Paragraph>
                Webpack 是现代前端项目的核心构建工具，主要配置包括：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>入口配置 (entry)</Text>
                    <ul>
                        <li>单入口/多入口配置</li>
                        <li>动态入口配置</li>
                        <li>入口依赖配置</li>
                    </ul>
                </li>
                <li>
                    <Text strong>输出配置 (output)</Text>
                    <ul>
                        <li>输出路径和文件名配置</li>
                        <li>资源公共路径（publicPath）设置</li>
                        <li>代码分割和动态导入配置</li>
                    </ul>
                </li>
                <li>
                    <Text strong>模块处理 (module)</Text>
                    <ul>
                        <li>Loader配置（处理不同类型文件）</li>
                        <li>样式处理（CSS/SCSS/Less）</li>
                        <li>文件处理（图片/字体等）</li>
                        <li>TypeScript/Babel转换</li>
                    </ul>
                </li>
                <li>
                    <Text strong>插件系统 (plugins)</Text>
                    <ul>
                        <li>HTML生成插件</li>
                        <li>CSS提取插件</li>
                        <li>压缩优化插件</li>
                        <li>环境变量注入</li>
                    </ul>
                </li>
            </ul>
        </>
    ),
    'build-optimization': (
        <>
            <Title level={5}>打包优化策略</Title>
            <Paragraph>
                前端项目打包优化的关键点：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>代码分割 (Code Splitting)</Text>
                    <ul>
                        <li>路由级别分割</li>
                        <li>组件级别分割</li>
                        <li>第三方库分割</li>
                        <li>动态导入配置</li>
                    </ul>
                </li>
                <li>
                    <Text strong>缓存优化</Text>
                    <ul>
                        <li>持久化缓存配置</li>
                        <li>模块标识符优化</li>
                        <li>运行时代码分离</li>
                        <li>长期缓存优化</li>
                    </ul>
                </li>
                <li>
                    <Text strong>体积优化</Text>
                    <ul>
                        <li>Tree Shaking</li>
                        <li>Scope Hoisting</li>
                        <li>压缩混淆</li>
                        <li>按需加载</li>
                    </ul>
                </li>
                <li>
                    <Text strong>构建速度优化</Text>
                    <ul>
                        <li>多进程构建</li>
                        <li>缓存加速</li>
                        <li>构建时依赖优化</li>
                    </ul>
                </li>
            </ul>
        </>
    ),
    'resource-handling': (
        <>
            <Title level={5}>资源处理策略</Title>
            <Paragraph>
                前端项目中各类资源的处理方案：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>静态资源</Text>
                    <ul>
                        <li>图片优化和压缩</li>
                        <li>字体文件处理</li>
                        <li>媒体文件处理</li>
                        <li>SVG处理</li>
                    </ul>
                </li>
                <li>
                    <Text strong>样式资源</Text>
                    <ul>
                        <li>CSS提取和压缩</li>
                        <li>PostCSS处理</li>
                        <li>CSS Modules</li>
                        <li>主题构建</li>
                    </ul>
                </li>
                <li>
                    <Text strong>JavaScript资源</Text>
                    <ul>
                        <li>ES6+转换</li>
                        <li>TypeScript编译</li>
                        <li>压缩和混淆</li>
                        <li>Source Map生成</li>
                    </ul>
                </li>
                <li>
                    <Text strong>其他资源</Text>
                    <ul>
                        <li>JSON/XML处理</li>
                        <li>Worker文件处理</li>
                        <li>第三方资源整合</li>
                    </ul>
                </li>
            </ul>
        </>
    ),
    'env-config': (
        <>
            <Title level={5}>环境配置管理</Title>
            <Paragraph>
                不同环境下的构建配置管理：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>环境区分</Text>
                    <ul>
                        <li>开发环境(development)</li>
                        <li>测试环境(testing)</li>
                        <li>预发布环境(staging)</li>
                        <li>生产环境(production)</li>
                    </ul>
                </li>
                <li>
                    <Text strong>环境变量</Text>
                    <ul>
                        <li>环境变量配置</li>
                        <li>敏感信息处理</li>
                        <li>条件编译</li>
                        <li>特性开关</li>
                    </ul>
                </li>
                <li>
                    <Text strong>构建配置</Text>
                    <ul>
                        <li>基础配置</li>
                        <li>环境特定配置</li>
                        <li>配置合并策略</li>
                        <li>多环境构建</li>
                    </ul>
                </li>
            </ul>
        </>
    ),
    'deploy-strategy': (
        <>
            <Title level={5}>部署策略</Title>
            <Paragraph>
                前端项目的部署策略和最佳实践：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>部署方式</Text>
                    <ul>
                        <li>静态资源部署</li>
                        <li>容器化部署</li>
                        <li>自动化部署</li>
                        <li>灰度发布</li>
                    </ul>
                </li>
                <li>
                    <Text strong>CI/CD</Text>
                    <ul>
                        <li>持续集成配置</li>
                        <li>自动化测试</li>
                        <li>自动化部署</li>
                        <li>回滚机制</li>
                    </ul>
                </li>
                <li>
                    <Text strong>监控和优化</Text>
                    <ul>
                        <li>性能监控</li>
                        <li>错误监控</li>
                        <li>用户体验监控</li>
                        <li>资源监控</li>
                    </ul>
                </li>
                <li>
                    <Text strong>安全策略</Text>
                    <ul>
                        <li>内容安全策略(CSP)</li>
                        <li>资源完整性校验</li>
                        <li>HTTPS配置</li>
                        <li>安全扫描</li>
                    </ul>
                </li>
            </ul>
        </>
    ),
    'deploy-doc': (
        <>
            <Title level={5}>部署文档 (DEPLOY.md)</Title>
            <Paragraph>
                本项目提供了详细的部署指南，包括以下关键内容：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>环境要求</Text>
                    <ul>
                        <li>Node.js {'>='} 14.0.0</li>
                        <li>npm {'>='} 6.14.0</li>
                        <li>React {'>='} 18.0.0</li>
                        <li>TypeScript {'>='} 4.9.0</li>
                    </ul>
                </li>
                <li>
                    <Text strong>部署方式</Text>
                    <ul>
                        <li>开发环境部署</li>
                        <li>生产环境部署</li>
                        <li>Docker 容器化部署</li>
                        <li>Nginx 配置说明</li>
                    </ul>
                </li>
                <li>
                    <Text strong>环境配置</Text>
                    <ul>
                        <li>开发环境变量配置</li>
                        <li>生产环境变量配置</li>
                        <li>服务器环境配置</li>
                    </ul>
                </li>
                <li>
                    <Text strong>常见问题</Text>
                    <ul>
                        <li>构建失败解决方案</li>
                        <li>路由 404 问题处理</li>
                        <li>性能优化建议</li>
                        <li>安全配置说明</li>
                    </ul>
                </li>
            </ul>
            <Paragraph>
                <Text type="secondary">
                    详细部署步骤和说明请查看项目根目录下的 DEPLOY.md 文件
                </Text>
            </Paragraph>
        </>
    ),
    'markdown-basic': (
        <>
            <Title level={5}>Markdown 基础渲染实现</Title>
            <Paragraph>
                实现 Markdown 文件在前端页面的基础渲染功能：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>核心实现</Text>
                    <ul>
                        <li>使用 react-markdown 解析和渲染 Markdown 内容</li>
                        <li>支持 CommonMark 和 GFM 语法</li>
                        <li>处理内联 HTML 和 XSS 防护</li>
                        <li>自定义组件映射</li>
                    </ul>
                </li>
                <li>
                    <Text strong>文件加载</Text>
                    <ul>
                        <li>动态加载 .md 文件</li>
                        <li>支持远程 Markdown 获取</li>
                        <li>错误处理和加载状态</li>
                        <li>缓存优化</li>
                    </ul>
                </li>
                <li>
                    <Text strong>基础样式</Text>
                    <ul>
                        <li>标题层级样式</li>
                        <li>段落和列表样式</li>
                        <li>引用和分割线</li>
                        <li>表格基础样式</li>
                    </ul>
                </li>
            </ul>
            <Paragraph>
                示例代码：
            </Paragraph>
            <pre>
                <code className="language-typescript">
{`// 基础 Markdown 渲染组件
import { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const MarkdownViewer: React.FC<{ filePath: string }> = ({ filePath }) => {
    const [content, setContent] = useState('');
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const loadMarkdown = async () => {
            try {
                const response = await fetch(filePath);
                const text = await response.text();
                setContent(text);
            } catch (error) {
                console.error('加载 Markdown 文件失败:', error);
            } finally {
                setLoading(false);
            }
        };

        loadMarkdown();
    }, [filePath]);

    if (loading) return <div>加载中...</div>;

    return (
        <div className="markdown-content">
            <ReactMarkdown remarkPlugins={[remarkGfm]}>
                {content}
            </ReactMarkdown>
        </div>
    );
};

export default MarkdownViewer;`}
                </code>
            </pre>
        </>
    ),
    'markdown-code': (
        <>
            <Title level={5}>Markdown 代码高亮实现</Title>
            <Paragraph>
                为 Markdown 文件中的代码块添加语法高亮功能：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>代码高亮配置</Text>
                    <ul>
                        <li>集成 react-syntax-highlighter</li>
                        <li>支持多种主题风格</li>
                        <li>自动语言检测</li>
                        <li>行号显示配置</li>
                    </ul>
                </li>
                <li>
                    <Text strong>主题定制</Text>
                    <ul>
                        <li>明暗主题切换</li>
                        <li>自定义高亮颜色</li>
                        <li>字体和间距调整</li>
                        <li>响应式适配</li>
                    </ul>
                </li>
                <li>
                    <Text strong>交互增强</Text>
                    <ul>
                        <li>代码块复制功能</li>
                        <li>代码折叠展开</li>
                        <li>全屏查看模式</li>
                        <li>搜索和高亮</li>
                    </ul>
                </li>
            </ul>
        </>
    ),
    'markdown-extensions': (
        <>
            <Title level={5}>Markdown 扩展功能</Title>
            <Paragraph>
                增强 Markdown 渲染的扩展功能：
            </Paragraph>
            <ul>
                <li>
                    <Text strong>目录生成</Text>
                    <ul>
                        <li>自动提取标题生成目录</li>
                        <li>目录层级配置</li>
                        <li>锚点导航功能</li>
                        <li>滚动监听高亮</li>
                    </ul>
                </li>
                <li>
                    <Text strong>图片处理</Text>
                    <ul>
                        <li>图片懒加载优化</li>
                        <li>图片预览功能</li>
                        <li>响应式图片</li>
                        <li>图片上传集成</li>
                    </ul>
                </li>
                <li>
                    <Text strong>交互优化</Text>
                    <ul>
                        <li>链接新窗口打开</li>
                        <li>表格排序和搜索</li>
                        <li>任务列表交互</li>
                        <li>数学公式渲染</li>
                    </ul>
                </li>
                <li>
                    <Text strong>自定义语法</Text>
                    <ul>
                        <li>自定义容器</li>
                        <li>提示框语法</li>
                        <li>标记和高亮</li>
                        <li>自定义组件嵌入</li>
                    </ul>
                </li>
            </ul>
            <Paragraph>
                <Text type="secondary">
                    通过这些扩展功能，可以实现更丰富的 Markdown 文档展示效果，提升用户阅读体验。
                </Text>
            </Paragraph>
        </>
    ),
};

// 搜索结果接口
interface SearchResult {
    key: string;
    title: string;
    path: string[];
}

const ProjectStructure: React.FC = () => {
    const [selectedContent, setSelectedContent] = useState<React.ReactNode>(null);
    const [searchValue, setSearchValue] = useState('');
    const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
    const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
    const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);

    // 递归搜索树节点
    const searchNodes = (nodes: DataNode[], keyword: string, path: string[] = []): SearchResult[] => {
        let results: SearchResult[] = [];
        
        nodes.forEach(node => {
            const currentPath = [...path, node.title as string];
            if (node.title?.toString().toLowerCase().includes(keyword.toLowerCase())) {
                results.push({
                    key: node.key as string,
                    title: node.title as string,
                    path: currentPath
                });
            }
            if (node.children) {
                results = [...results, ...searchNodes(node.children, keyword, currentPath)];
            }
        });
        
        return results;
    };

    // 处理搜索
    const handleSearch = (value: string) => {
        setSearchValue(value);
        if (!value.trim()) {
            setSearchResults([]);
            return;
        }
        
        const results = searchNodes(treeData, value);
        setSearchResults(results);
        
        // 展开包含搜索结果的节点
        const keys = results.map(item => item.key);
        setExpandedKeys(keys);
        if (keys.length > 0) {
            setSelectedKeys([keys[0]]);
            setSelectedContent(contentMap[keys[0]] || null);
        }
    };

    // 处理节点选择
    const onSelect = (selectedKeys: React.Key[], info: any) => {
        const key = selectedKeys[0] as string;
        setSelectedKeys(selectedKeys);
        setSelectedContent(contentMap[key] || null);
    };

    // 处理展开/收起
    const onExpand = (newExpandedKeys: React.Key[]) => {
        setExpandedKeys(newExpandedKeys);
    };

    return (
        <div className="project-structure-container">
            <ProjectOverview />
            <Row gutter={[24, 24]} className="project-structure-page">
                <Col xs={24} sm={24} md={10} lg={8} xl={8}>
                    <Card className="project-structure">
                        <Title level={4}>项目结构</Title>
                        <Search
                            placeholder="搜索技术点..."
                            allowClear
                            enterButton={<SearchOutlined />}
                            onSearch={handleSearch}
                            className="search-input"
                        />
                        {searchResults.length > 0 && searchValue && (
                            <div className="search-results">
                                <Text type="secondary">找到 {searchResults.length} 个结果</Text>
                                {searchResults.map(result => (
                                    <div key={result.key} className="search-result-item">
                                        <Text>{result.path.join(' > ')}</Text>
                                    </div>
                                ))}
                            </div>
                        )}
                        <Tree
                            showIcon
                            defaultExpandAll
                            expandedKeys={expandedKeys}
                            selectedKeys={selectedKeys}
                            onSelect={onSelect}
                            onExpand={onExpand}
                            treeData={treeData}
                        />
                    </Card>
                </Col>
                <Col xs={24} sm={24} md={14} lg={16} xl={16}>
                    <Card className="content-display">
                        {selectedContent ? (
                            <div className="content-area">
                                {selectedContent}
                            </div>
                        ) : (
                            <Empty 
                                description={
                                    <span>
                                        请选择左侧节点查看详细信息
                                        <br />
                                        <Text type="secondary">
                                            或使用搜索功能查找特定技术点
                                        </Text>
                                    </span>
                                }
                            />
                        )}
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default ProjectStructure; 